<template>
    <app-layout title="资金明细">
        <view class="withdraw-log-container">
            <view class="log-item" v-for="(item, index) in list" :key="index">
                <view class="date">
                    {{ item.createTime }}
                </view>
                <view class="body">
                    <text class="money" :class="{ active: item.change > 0 }">{{ item.change }}</text>
                    <text class="balance">余额：{{ item.balance }}</text>
                </view>
                <view class="remark"> 备注：{{ item.remark }} </view>
            </view>
        </view>
        <app-load-more :hasMore="more" @loadmore="loadList" />
    </app-layout>
</template>

<script>
import AppLayout from "@/components/layout/layout";
import AppLoadMore from "@/components/widgets/loadmore";
export default {
    name: "member-cash-log",
    data() {
        return {
            page: 1,
            more: true,
            list: [],
        };
    },
    components: {
        AppLayout,
        AppLoadMore,
    },
    onLoad() {
        this.loadList();
    },
    onShow() {},
    onReady() {},
    onHide() {},
    onReachBottom() {
        if (this.more) {
            this.loadList();
        }
    },
    onPullDownRefresh() {},
    onShareTimeline() {},
    onShareAppMessage() {},
    methods: {
        loadList() {
            this.$models.user
                .cashLog({
                    page: this.page,
                })
                .then((list) => {
                    if (list.length > 0) {
                        this.list = this.list.concat(list);
                        this.page++;
                    } else {
                        this.more = false;
                    }
                });
        },
    },
};
</script>

<style lang="less" scoped>
.withdraw-log-container {
    width: 100%;
    padding: 20rpx 0;
    .log-item {
        width: 100%;
        background-color: #ffffff;
        box-sizing: border-box;
        padding: 20rpx 30rpx;
        margin-bottom: 20rpx;
        font-size: 28rpx;
    }
    .date {
        color: #999999;
        font-size: 28rpx;
        line-height: 28rpx;
    }
    .body {
        margin: 20rpx 0;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
    .money {
        color: #08b500;
        font-size: 32rpx;
        font-weight: bold;
    }
    .money.active {
        color: #ff0000;
    }
    .balance {
        color: #666666;
    }
    .remark {
        color: #666666;
        padding-top: 10rpx;
        border-top: 2rpx solid #e0e0e0;
    }
}
</style>